<template>
  <!-- banner -->
  <div class="banner">
    <div class="container">
      <div class="order">
        <div class="orderleft">
          <div class="order-son">
            登记
            <div class="block">
            <el-date-picker :disabled-date="todaytime" v-model="cometime" type="date" placeholder="入住时间" size="default" />
            </div>
          </div>
          <div class="order-son">
            离店
            <div class="block">
              <el-date-picker :disabled-date="disabledDate" v-model="leavetime" type="date" placeholder="离店时间" size="default" />
            </div>
          </div>
          <div class="order-son">
            人数
            <el-select v-model="people" class="block" placeholder="人数" size="default">
              <el-option v-for="item in peoplenum" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="order-last">
          <!-- 有优惠券吗？<br> -->
          <el-button type="success">查询</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 客房部分 -->
  <div id="GuestRoom">
    <div class="container">
      <div class="GuestRoom-one">
        <img src="img/hubian.jpg">
        <div>
          <h4>
            ——<br><br>
            是你享受生活<br>最好的地方<br>&nbsp;
          </h4>
          <p>
            坐落于三岔湖风景区内，最优美的小岛——花岛，四面环湖<br>
            出行有游船，还可以体验快艇，欣赏桃花<br>
            没有喧嚣，没有吵闹<br>
            享受宁静与安详
          </p>
        </div>
      </div>
    </div>
    <div class="GuestRoom-two-bg">
      <div class="container">
        <div class="GuestRoom-two">
          <div class="two-bai">
            <h4>发现我们的房间</h4>
            <p>豪华的内饰</p>
            <ul class="room">
              <li>
                <img src="img/jiudian2.jpg">
                <div class="Room-jd">
                  经典房间
                  <p>入住￥ 80.00 /每晚</p>
                </div>
              </li>
              <li>
                <img src="img/jiudian2.jpg">
                <div class="Room-hh">
                  豪华大房
                  <p>入住￥130.00/每晚</p>
                </div>
              </li>
              <li>
                <img src="img/jiudian2.jpg">
                <div class="Room-gj">
                  高级房
                  <p>入住￥180.00/每晚</p>
                </div>
              </li>
            </ul>
          </div>
          <img src="img/jiudian1.jpg">
        </div>
      </div>
    </div>
  </div>
  <!-- 提供服务部分 -->
  <div id="characteristic">
    <div class="container">
      <div class="tu3">
        <img src="img/jiudian2.jpg">
      </div>
      <div class="zuo">
        <div class="characteristic-shang">
          <p>SERVICE CORE</p>
          ——— 优质服务 ———
        </div>
        <div class="characteristic-xia">
          <div id="hd">
            <h4>组织活动</h4>
          </div>
          <div id="jx">
            <h4>叫醒服务</h4>
          </div>
          <div id="tc">
            <h4>免费停车</h4>
          </div>
          <div id="yc">
            <h4>用车服务</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 客服及天气部分 -->
  <div id="weather">
    <div class="container">
      <h1>CONTACT US</h1>
      <p>联系我们</p>
      <iframe width="700" height="150" frameborder="0" scrolling="no" hspace="0"
        src="https://i.tianqi.com/?c=code&a=getcode&id=48&num=6&icon=1&py=chengdu&site=12"></iframe>
      <div class="wai clearfix">
        <div class="dz">
          <img src="img/dz.png">
          <p>
            地址：<br>
            四川省成都市三岔湖风景区花岛
          </p>
        </div>
        <div class="dh">
          <img src="img/dh.png">
          <p>
            联系电话：<br>
            400 — 888 — 8888
          </p>
        </div>
        <div class="qq">
          <img src="img/QQ.png">
          <p>
            QQ：<br>
            2 8 6 5 0 6 8 9 1 2
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 入住时间
const cometime = ref('')
// 离开时间
const leavetime = ref('')
const people = ref('')
const peoplenum = [
  {
    value: '1',
    label: '1人',
  },
  {
    value: '2',
    label: '2人',
  },
  {
    value: '3',
    label: '3人',
  },
  {
    value: '4',
    label: '4人',
  },
  {
    value: '5',
    label: '5人',
  },
]
//今天之前的日期不可选
const todaytime = (time) => {
  return time.getTime() < Date.now()
}
//大于入住时间的日期可选
const disabledDate = (time) => {
  return time.getTime() < new Date(cometime.value+24*3600*1000)
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

// banner部分
.banner {
  border-top: 1px solid #fff;
  min-width: 1200px;
  margin: 0 auto;
  height: 400px;
  width: 100%;
  background: url(img/dujiajiudian.jpg) no-repeat center;
  background-size: 100% auto;

  .order {
    margin: 350px auto;
    display: flex;
    justify-content: space-between;
    width: 700px;
    height: 120px;
    background-color: aliceblue;
    box-shadow: 0px 0px 10px 5px #ccc;
    border: 1px solid #bbb;

    .orderleft {
      background-color: aliceblue;
      display: flex;
      justify-content: space-between;
      width: 460px;
      padding: 20px;

      .order-son {
        flex: 1;
        margin: 10px 0 0 10px;
        display: flex;
        flex-direction: column;
        align-items: left;
        border-right: 1px solid #aaa;
        overflow: hidden;
        .block {
          width: 120px !important;
          margin-top: 10px;
        }
      }

      :nth-child(3) {
        border-right: 0;
      }
    }

    .order-last {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 135px;
      background-color: rgb(217, 226, 228);

      button {
        width: 80px;
        background-color: rgb(125, 154, 21);
        border: 0;
      }
    }

  }
}

/* 客房部分 */
#GuestRoom {
  background-color: #EFEFEF;

  .GuestRoom-one {
    display: flex;
    padding: 120px 0 80px 0;

    img {
      // float: left;
      margin-left: 180px;
      width: 300px;
      border: 10px solid #FFFFFF;
    }

    div {
      margin-left: 100px;

      h4 {
        font-size: 30px;
      }
    }
  }

  .GuestRoom-two-bg {
    background-color: #FFFFFF;

    .GuestRoom-two {
      display: flex;

      .two-bai {
        width: 400px;
        height: 100%;

        h4 {
          margin-top: 50px;
          color: #969393;
          margin-left: 20px;
        }

        p {
          font-size: 30px;
          font-weight: 800;
          margin-left: 20px;
        }

        .room {
          list-style: none;
          width: 400px;
          border-right: 1px solid #000000;

          li {
            display: flex;
            flex-direction: row;
            color: #686868;
            width: 100%;

            img {
              width: 140px;
              margin: 10px 20px 10px 0;
            }

            div {
              margin-top: 30px;

              p {
                font-size: 20px;
                margin-left: 0px;
              }
            }

          }
        }
      }

      .room li:hover {
        border-right: 10px solid #000000;
        color: #000000;
        background-color: #E3E3E3;
      }

      img {
        width: 720px;
        margin-left: 80px;
      }
    }
  }
}

// 提供服务部分
#characteristic {
  background-color: #EFEFEF;

  .container {
    display: flex;
    height: 500px;

    .zuo {
      float: right;
      width: 720px;

      .characteristic-shang {
        text-align: center;
        line-height: 50px;
        font-size: 30px;

        p {
          margin-top: 70px;
          font-size: 17px;
        }
      }

      .characteristic-xia {
        /* width: 100%; */
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 60px;

        div {
          width: 160px;
          border: 1px solid #9D936B;
          text-align: center;
          font-size: 24px;
          height: 150px;

          h4 {
            margin-top: 110px;
            color: #9D936B;
          }
        }

        :hover h4 {
          color: #fff;
        }
      }
    }

    .tu3 {
      img {
        height: 500px;
        width: 480px;
      }
    }
  }
}

#characteristic {
  .container {
    .characteristic-xia {
      div {
        background-size: 100px !important;
        background-position: 30px 5px !important;
      }
    }
  }

  #hd {
    background: url(img/hd.png) no-repeat;
  }

  #hd:hover {
    background: url(img/hd1.png) no-repeat;
    background-color: #bbb7a5;
  }

  #jx {
    background: url(img/jxfw.png) no-repeat;

  }

  #jx:hover {
    background: url(img/jxfw1.png) no-repeat;
    background-color: #9D936B;
  }

  #tc {
    background: url(img/tc.png) no-repeat;
  }

  #tc:hover {
    background: url(img/tc1.png) no-repeat;
    background-color: #9D936B;
  }

  #yc {
    background: url(img/jjfw.png) no-repeat;
  }

  #yc:hover {
    background: url(img/jjfw1.png) no-repeat;
    background-color: #9D936B;
  }


}

/* 客服及天气部分 */
#weather {
  width: 100%;
  text-align: center;

  .container {
    h1 {
      margin-top: 30px;
    }

    img {
      height: 350px;
      width: 70%;
      border: 1px solid #000;
    }

    p {
      margin-bottom: 30px;
    }

    .wai {
      margin-left: 150px;

      div {
        float: left;
        width: 300px;
        text-align: center;

        img {
          width: 100px;
          height: 100px;
          background-color: #000000;
          border-radius: 50%;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>
